import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';
import { Card, Button, Upload } from 'antd';
import type { GetProp, UploadFile, UploadProps } from 'antd';

import { ToolsHeader, CategoryList } from '../../../../components';
import {  MetaDataObject } from '../../../../services';

export interface MetaDataImportPanelProps {
    style?: CSSProperties;
    domainIdentifier: string;
    onDomainChange?: (domainIdentifier: string) => Promise<void>;
}

export const MetaDataImportPanel: React.FC<MetaDataImportPanelProps> = (props) => {

    const [fileList, setFileList] = useState<UploadFile[]>([]);

    return (
        <Container style={props.style}>
            <StyledCard
                style={{
                }}
                title={'导入'}
                styles={{
                    body: {
                        padding: '0px 2px'
                    }
                }}
            >
                <Top>
                    <Upload
                        multiple={false}
                        maxCount={1}
                        listType={'text'}
                        accept={''}
                        fileList={fileList}
                        customRequest={async (options) => { }}
                        onChange={({ file, fileList: newFileList }) => {

                        }}
                    >
                        <Button>{'上传文件'}</Button>
                    </Upload>
                </Top>
                <Result>
                    <Logger>
                        <Line>生成导出文件....</Line>
                    </Logger>
                </Result>
            </StyledCard>
        </Container>
    );
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
`;

const StyledCard = styled(Card)`
    width: 100%;
`
const Top = styled.div`
    width: 100%;
    height: 120px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const Result = styled.div`
    flex: 1;
    width: 100%;
    padding: 10px 10px;
    display: flex;
    gap: 10px;
`;


const Logger = styled.div`
    flex: 1;
    width: 400px;
    background-color: #FFFFFF;
    padding: 10px 10px;
    display: flex;
    gap: 10px;
`;

const Line = styled.div`
    font-size: 10px;
`;

